<template>
  <div class="creator-wall gap-col-36" @scroll="onScroll">
    <div class="desc">
      <div class="font-size-14 font-weight-500 line-height-140 text-center">{{ $t('title.popularCreator') }}</div>
      <div class="font-size-12 font-weight-400 line-height-120 text-center">{{ $t('title.followToView') }}</div>
    </div>
    <div class="creators">
      <Link
        v-for="(creator, i) in creators"
        class="creator"
        :key="creator.aff"
        :href="`/${creator.username}`"
        :title="creator.nickname || creator.username"
        @click="toCreatorPage(creator.username, creator.aff)"
        @mouseover="currentPlay = i"
      >
        <Video v-if="currentPlay === i" :url="creator.video_path" :active="true" :ready="true" in-card></Video>
        <EncryptImage
          v-else
          :src="creator.img_path"
          :alt="creator.nickname || creator.username"
          :border-radius="10"
          object-fit="cover"
        ></EncryptImage>
        <div class="info">
          <Avatar
            class="avatar mb-2"
            :src="creator.avatar"
            :radius="38"
            :vip="creator.is_vip"
            :vipTier="creator.tier"
          ></Avatar>
          <div class="nickname font-size-14 font-weight-500 line-height-140">{{ creator.nickname }}</div>
          <div class="username font-size-14 font-weight-500 line-height-140 mb-4">{{ `@${creator.username}` }}</div>
          <FollowButton :user-id="creator.aff" :is-follow="creator.is_follow" style-gradient></FollowButton>
        </div>
      </Link>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { $t } from '@/i18n'
import Link from '@/components/common/Link.vue'
import Avatar from '@/components/multimedia/Avatar.vue'
import EncryptImage from '@/components/multimedia/EncryptImage.vue'
import Video from '@/components/multimedia/Video.vue'
import FollowButton from '@/components/viewer/stateful/FollowButton.vue'

defineProps({
  creators: { type: Array, required: true },
})

const emits = defineEmits(['toEnd'])

const currentPlay = ref(0)

let isScrollToBottom = false
function onScroll({ target: { scrollTop, scrollHeight, clientHeight } }) {
  // 滑到底
  if (scrollHeight - scrollTop - clientHeight < 10) {
    if (!isScrollToBottom) {
      isScrollToBottom = true
      emits('toEnd')
    }
  } else {
    isScrollToBottom = false
  }
}

const router = useRouter()
function toCreatorPage(username, id) {
  router.replace({
    name: 'creator',
    params: { username },
    query: { from: 'home', id },
  })
}
</script>

<style lang="scss" scoped>
.creator-wall {
  width: 100%;
  height: calc(100% - 5.125rem);
  margin-top: 5.125rem;
  display: flex;
  flex-direction: column;
  overflow: auto;

  .creators {
    padding-bottom: 2rem;
    display: grid;
    grid-template-columns: repeat(3, 13.375rem);
    gap: 1rem;
    justify-content: center;

    .creator {
      width: 13.375rem;
      height: 20.25rem;
      border-radius: 0.625rem;
      position: relative;

      .info {
        width: 100%;
        height: 100%;
        padding: 3rem 1rem 1rem;
        background: rgba(24, 25, 37, 0.3);
        position: absolute;
        top: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
      }
    }
  }
}
</style>
